<template>
  <view class="card-swiper-container">
    <swiper 
      class="card-swiper" 
      :style="{ height: height }"
      :indicator-dots="false" 
      :autoplay="autoplay" 
      :interval="interval" 
      :duration="duration"
      :circular="circular"
      @change="onSwiperChange"
      :previous-margin="computedPreviousMargin"
      :next-margin="computedNextMargin"
    >
      <swiper-item v-for="(item, index) in list" :key="index">
        <view 
          class="swiper-item-wrapper"
          :class="{ 'active': currentIndex === index }"
          :style="getItemStyle(index)"
        >
          <slot name="item" :item="item" :index="index" :active="currentIndex === index">
            <!-- 默认卡片样式 -->
            <view 
              class="default-card" 
              :style="{ 
                background: item.background || `linear-gradient(135deg, ${item.gradient || '#667eea, #764ba2'})`,
                borderRadius: borderRadius
              }"
            >
              <!-- 装饰背景 -->
              <view v-if="showDecoration" class="card-decoration">
                <view class="decoration-circle circle-1"></view>
                <view class="decoration-circle circle-2"></view>
                <view class="decoration-circle circle-3"></view>
              </view>
              
              <!-- 默认内容 -->
              <view class="card-content">
                <view v-if="item.tag" class="card-tag">{{ item.tag }}</view>
                <text class="card-title">{{ item.title }}</text>
                <text v-if="item.desc" class="card-desc">{{ item.desc }}</text>
              </view>
              
              <!-- 图标/图片 -->
              <view v-if="item.icon || item.image" class="card-image-wrapper">
                <view v-if="showGlow" class="image-glow"></view>
                <image 
                  class="card-image" 
                  :src="item.icon || item.image" 
                  mode="aspectFit"
                />
              </view>
            </view>
          </slot>
        </view>
      </swiper-item>
    </swiper>
    
    <!-- 指示器 -->
    <view v-if="showIndicator" class="swiper-indicator" :style="{ marginTop: indicatorGap }">
      <view 
        v-for="(item, index) in list" 
        :key="index"
        class="indicator-dot"
        :class="{ 'active': currentIndex === index }"
        :style="indicatorStyle(index)"
      ></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, PropType } from 'vue';
import type { CardSwiperItem } from '@/types/card-swiper';

const props = defineProps({
  // 轮播数据
  list: {
    type: Array as PropType<CardSwiperItem[]>,
    default: () => []
  },
  // 左右边距（控制前后卡片露出的宽度）
  sideMargin: {
    type: [String, Number] as PropType<string | number>,
    default: 40
  },
  previousMargin: {
    type: String as PropType<string>,
    default: ''
  },
  nextMargin: {
    type: String as PropType<string>,
    default: ''
  },
  // 高度
  height: {
    type: String as PropType<string>,
    default: '400rpx'
  },
  // 圆角
  borderRadius: {
    type: String as PropType<string>,
    default: '32rpx'
  },
  // 自动播放
  autoplay: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 自动播放间隔
  interval: {
    type: Number as PropType<number>,
    default: 4000
  },
  // 切换时长
  duration: {
    type: Number as PropType<number>,
    default: 600
  },
  // 循环播放
  circular: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 激活卡片缩放
  activeScale: {
    type: Number as PropType<number>,
    default: 1
  },
  // 非激活卡片缩放
  inactiveScale: {
    type: Number as PropType<number>,
    default: 0.85
  },
  // 非激活卡片透明度
  inactiveOpacity: {
    type: Number as PropType<number>,
    default: 0.5
  },
  // 非激活卡片Y轴偏移
  inactiveOffsetY: {
    type: String as PropType<string>,
    default: '20rpx'
  },
  // 显示指示器
  showIndicator: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 指示器间距
  indicatorGap: {
    type: String as PropType<string>,
    default: '30rpx'
  },
  // 指示器颜色
  indicatorColor: {
    type: String as PropType<string>,
    default: '#d1d5db'
  },
  indicatorActiveColor: {
    type: String as PropType<string>,
    default: 'linear-gradient(135deg, #3b82f6, #8b5cf6)'
  },
  // 显示装饰元素
  showDecoration: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 显示光晕效果
  showGlow: {
    type: Boolean as PropType<boolean>,
    default: true
  }
});

const emit = defineEmits<{
  (e: 'change', index: number): void;
  (e: 'click', item: CardSwiperItem, index: number): void;
}>();

// 当前索引
const currentIndex = ref(0);

// 计算左右边距
const computedPreviousMargin = computed(() => {
  if (props.previousMargin) return props.previousMargin;
  return typeof props.sideMargin === 'number' ? `${props.sideMargin}rpx` : props.sideMargin;
});

const computedNextMargin = computed(() => {
  if (props.nextMargin) return props.nextMargin;
  return typeof props.sideMargin === 'number' ? `${props.sideMargin}rpx` : props.sideMargin;
});

// 轮播切换
const onSwiperChange = (e: any) => {
  currentIndex.value = e.detail.current;
  emit('change', e.detail.current);
};

// 获取轮播项样式
const getItemStyle = (index: number) => {
  const isActive = currentIndex.value === index;
  return {
    transform: isActive 
      ? `scale(${props.activeScale}) translateY(0) translateZ(0)` 
      : `scale(${props.inactiveScale}) translateY(${props.inactiveOffsetY}) translateZ(0)`,
    opacity: isActive ? 1 : props.inactiveOpacity
  };
};

// 指示器样式
const indicatorStyle = (index: number) => {
  const isActive = currentIndex.value === index;
  return {
    width: isActive ? '32rpx' : '8rpx',
    background: isActive ? props.indicatorActiveColor : props.indicatorColor,
    boxShadow: isActive ? '0 2rpx 8rpx rgba(59, 130, 246, 0.4)' : 'none'
  };
};

// 暴露方法
defineExpose({
  currentIndex,
  setIndex: (index: number) => {
    currentIndex.value = index;
  }
});
</script>

<style lang="scss" scoped>
.card-swiper-container {
  position: relative;
  width: 100%;

  .card-swiper {
    width: 100%;
    overflow: visible;
  }

  .swiper-item-wrapper {
    height: 100%;
    padding: 0 8rpx;
    box-sizing: border-box;
    position: relative;
    will-change: transform;
  }

  .default-card {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50rpx 40rpx;
    border-radius: 32rpx;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 10rpx 40rpx -10rpx rgba(0, 0, 0, 0.2),
      0 5rpx 20rpx -5rpx rgba(0, 0, 0, 0.15);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);

    // 装饰背景
    .card-decoration {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      pointer-events: none;
      border-radius: 32rpx;

      .decoration-circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10rpx);
        animation: float 8s ease-in-out infinite;
      }

      .circle-1 {
        width: 200rpx;
        height: 200rpx;
        top: -80rpx;
        right: -50rpx;
        animation-delay: 0s;
      }

      .circle-2 {
        width: 150rpx;
        height: 150rpx;
        bottom: -60rpx;
        left: -40rpx;
        animation-delay: 2.5s;
      }

      .circle-3 {
        width: 100rpx;
        height: 100rpx;
        top: 50%;
        left: 30%;
        animation-delay: 5s;
        opacity: 0.5;
      }
    }

    // 内容区域
    .card-content {
      flex: 1;
      z-index: 2;
      position: relative;

      .card-tag {
        display: inline-block;
        padding: 8rpx 20rpx;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10rpx);
        border-radius: 30rpx;
        font-size: 22rpx;
        color: #fff;
        font-weight: 600;
        margin-bottom: 16rpx;
        border: 1rpx solid rgba(255, 255, 255, 0.3);
        transition: opacity 0.4s ease;
        opacity: 0.3;
      }

      .card-title {
        display: block;
        font-size: 52rpx;
        font-weight: 800;
        color: #fff;
        margin-bottom: 12rpx;
        text-shadow: 
          0 2rpx 8rpx rgba(0, 0, 0, 0.2),
          0 4rpx 16rpx rgba(0, 0, 0, 0.15);
        letter-spacing: -0.5rpx;
        transition: opacity 0.4s ease;
        opacity: 0.3;
      }

      .card-desc {
        display: block;
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.5;
        text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
        transition: opacity 0.4s ease;
        opacity: 0.3;
      }
    }

    // 图片区域
    .card-image-wrapper {
      position: relative;
      width: 140rpx;
      height: 140rpx;
      z-index: 2;
      transition: opacity 0.4s ease;
      opacity: 0.4;

      .image-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 160rpx;
        height: 160rpx;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        border-radius: 50%;
        animation: pulse 3s ease-in-out infinite;
      }

      .card-image {
        width: 140rpx;
        height: 140rpx;
        position: relative;
        z-index: 3;
        padding: 20rpx;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(20rpx);
        border-radius: 28rpx;
        border: 2rpx solid rgba(255, 255, 255, 0.3);
        box-shadow: 
          0 10rpx 30rpx rgba(0, 0, 0, 0.15),
          0 0 0 1rpx rgba(255, 255, 255, 0.1) inset;
      }
    }
  }

  // 指示器
  .swiper-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12rpx;

    .indicator-dot {
      height: 8rpx;
      border-radius: 4rpx;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
}

// 动画
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(10deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}
</style>

